import React, { Component } from 'react';
import { NavBar,SideBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import service from '../../../api';


class cate extends Component {
    constructor (props){
        super(props);
        this.state = {
            tabs: [],
            tabbs:[],
            cate:[],
            name:[]
        }
    }
    handle = (key) => {
        console.log(key);
        console.log(this.state.tabs[key]);
        this.setState({ name: this.state.tabs[key] }, () => {
            console.log(this.state.name);
        })
        // 请求产品分类下品牌详情列表
        service.product.pro_categorybrandlist({ category: this.state.tabs[key] }).then((res) => {
            console.log(res.data);
            this.setState({ tabbs: res.data.data }, () => {
                console.log(this.state.tabbs);
            })
            
        })
    }
    // 分类下某品牌的产品列表
    mores = (item) => {
        // console.log(item.brand);
        service.product.pro_categorybrandprolist({ category: this.state.name,brand: item.brand }).then((res) => {
            console.log(res.data);
            this.setState({ cate: res.data.data }, () => {
                console.log(this.state.cate);
            })  
        })
    }
    //  产品分类列表
    componentDidMount() {
        service.product.pro_categorylist({}).then((res) => {
            console.log(res.data.data);
            this.setState({ tabs: res.data.data }, () => {
                console.log(this.state.tabs);
            })
        })
    }

    back = () => {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='cate'>
               <NavBar onBack={this.back}>分类列表</NavBar>
               <div className="bottom">
                    <SideBar onChange={key =>{ this.handle(key) }}>
                        {
                            this.state.tabs.map((item, index) => {
                                return (
                                    <SideBar.Item key={index} title={item} />
                                )
                            })
                        }
                    </SideBar>
                    <div className="boxs">
                        {
                            this.state.tabbs.map((item,index)=>{
                                return (
                                    <h4 key={index} onClick={()=>{ this.mores(item)}}>{item.brand}</h4>
                                )
                            })
                        }
                        {
                            this.state.cate.map((item, index) => {
                                return (
                                    <div className="bob" key={index}>
                                        <h5>{item.brand}</h5>
                                        <div className="bom">
                                            <img src={item.img1} alt="" />
                                            <div className="left">
                                                <h5>{item.proname}</h5>
                                                <p>￥{item.originprice}</p>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
               </div>
            </div>
        );
    }
}

export default cate;